<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="utf-8" />
  <title>水果信息</title>
  <link rel="stylesheet" type="text/css" href="css/imgs.css"/>
  <link rel="stylesheet" type="text/css" href="css/main.css"/>
  <script src="js/imgs.js" type="text/javascript" charset="utf-8"></script>
  <!-- 其他头部内容 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 引入其他 JavaScript 文件 -->
  <%--<script src="path/to/popup.js"></script>--%>

  <script type="text/javascript">
    function addToCart() {
      // 获取表单中的数据
      var fruitId = '${fruit.f_id}';
      var fruitName = '${fruit.f_name}';
      var fruitNorm = '${fruit.f_norm}';
      var fruitPrice = '${fruit.f_price}';
      var userId = '${sessionScope.user.uid}';
      var quantity = document.querySelector('.Unum span:nth-child(2)').innerText; // 获取数量

      // 检查用户是否登录
      if (!userId) {
        alert('请先登录！');
        window.location.href = '/fruit/login.jsp';
        return;
      }

      // 检查参数
      if (!fruitId || !fruitName || !fruitNorm || !fruitPrice || !quantity) {
        alert('参数不完整，请刷新页面重试');
        return;
      }

      // 创建 XMLHttpRequest 对象
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/fruit/cart/AddToCartServlet', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

      // 设置回调函数
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            try {
              var response = JSON.parse(xhr.responseText);
              alert(response.message);
              if (response.success) {
                // 可以在这里添加成功后的操作，比如刷新购物车数量显示
              }
            } catch (e) {
              alert('服务器响应格式错误');
            }
          } else {
            alert('请求失败，请稍后重试');
          }
        }
      };

      // 发送请求
      var params = 'fruitId=' + encodeURIComponent(fruitId) +
                  '&fruitName=' + encodeURIComponent(fruitName) +
                  '&fruitNorm=' + encodeURIComponent(fruitNorm) +
                  '&fruitPrice=' + encodeURIComponent(fruitPrice) +
                  '&quantity=' + encodeURIComponent(quantity) +
                  '&userId=' + encodeURIComponent(userId);
      
      xhr.send(params);
    }

    function updateQuantity(action) {
        var quantitySpan = document.querySelector('.Unum span:nth-child(2)');
        var currentQuantity = parseInt(quantitySpan.innerText);
        
        if (action === 'decrease') {
            if (currentQuantity > 1) {
                quantitySpan.innerText = currentQuantity - 1;
            }
        } else if (action === 'increase') {
            quantitySpan.innerText = currentQuantity + 1;
        }
    }

  </script>

</head>
<body onload="show()">
<jsp:include page="head/head.jsp"></jsp:include>

<div class="fruit_info">
  <div class="img_box">
    <c:forEach begin="1" end="${fruit.f_imgcount}" var="i">
      <c:if test="${i==1}">
        <div id="p${i-1}" class="show"><img src="img/fruits/${fruit.f_id}/(${i}).jpg" /></div>
      </c:if>
      <c:if test="${i!=1}">
        <div id="p${i-1}" class="non"><img src="img/fruits/${fruit.f_id}/(${i}).jpg" /></div>
      </c:if>
    </c:forEach>
   <%-- <div id="p1" class="non"><img src="img/fruits/1/(2).jpg" /></div>
    <div id="p2" class="non"><img src="img/fruits/1/(3).jpg" /></div>--%>

    <div class="img_to">
      <ul >
          <c:forEach begin="1" end="${fruit.f_imgcount}" var="i">
             <li><img src="img/fruits/${fruit.f_id}/(${i}).jpg" id="s${i-1}" onMouseMove="himg(this.id,'${fruit.f_imgcount}')"/></li>
          </c:forEach>
            <%--<li><img src="img/fruits/1/(2).jpg" id="s1" onMouseMove="himg(this.id)"/></li>
            <li><img src="img/fruits/1/(3).jpg" id="s2" onMouseMove="himg(this.id)"/></li>--%>
      </ul>
    </div>
  </div>

  <div class="fruit_text">
    <div class="fname">${fruit.f_name}</div>
    <p>&nbsp;</p>
    <div class="spec"><input type="radio" checked="checked" name="fnum_radio" value="fnum_radio" />${fruit.f_norm}</div>
    <div class="up">￥${fruit.f_price}</div>
    <div class="fid">商品编号:${fruit.f_id}</div>

    <hr />

    <form  method="post" id="fform" action="/AddToCartServlet">
      <div class="fform">
        <div class="fform1">
      <div class="Uaddress">配送至 :
        <select name="address" id="sel">
          <option value="上海">上海</option>
          <option value="吉林">吉林</option>
          <option value="山西">山西</option>
          <option value="北京">北京</option>
        </select>
      </div>
      <div class="Unum">
        <span id="numl" onclick="updateQuantity('decrease')">-</span>
        <span id="quantity">1</span>
        <span id="numr" onclick="updateQuantity('increase')">+</span>
      </div>
      </div>
        <div class="Uadd"><input type="button" name="add" id="cart" value="加入购物车" onclick="addToCart()" /></div>
        <div class="starbutton"><input type="button" name="add" id="star" value="已关注" onclick="addStar(2,1)"/></div>
      </div>
    </form>

    <hr/>
    <div class="finfo">
      <h3>商品简介</h3>
      <p id="finfo_text">${fruit.f_summary}</p>

    </div>
    <hr />
    <div class="fpro">
      <h3>温馨提示</h3>
      <p id="fpro_text">${fruit.f_prompt}</p>

    </div>
    <hr />
  </div>

  <div class="fruit_hot" >
    <div class="hf_title"><span class="ht_l">热卖商品</span><span class="ht_r"><a href="">MORE+</a></span></div>
     <div class="hot_fruit">
      <div class="hf_img"><a href="/x-test/FruitServlet?key=info&id=2&fid=1"><img src="img/fruits/1/(1).jpg" /></a></div>
      <div c="hf_text">
        <div class="hf_name"><a href="/x-test/FruitServlet?key=info&id=2&fid=1">佳沛新西兰绿奇异果</a></div>
        <div class="hf_mon">现货：￥<span>78.0</span></div>
      </div>
    </div>    <div class="hot_fruit">
      <div class="hf_img"><a href="/x-test/FruitServlet?key=info&id=2&fid=3"><img src="img/fruits/3/(1).jpg" /></a></div>
      <div c="hf_text">
        <div class="hf_name"><a href="/x-test/FruitServlet?key=info&id=2&fid=3">枣</a></div>
        <div class="hf_mon">现货：￥<span>23.0</span></div>
      </div>
    </div>    <div class="hot_fruit">
      <div class="hf_img"><a href="/x-test/FruitServlet?key=info&id=2&fid=4"><img src="img/fruits/4/(1).jpg" /></a></div>
      <div c="hf_text">
        <div class="hf_name"><a href="/x-test/FruitServlet?key=info&id=2&fid=4">菠萝</a></div>
        <div class="hf_mon">现货：￥<span>59.0</span></div>
      </div>
    </div>

  </div>
</div>

<jsp:include page="footer/footer.jsp"></jsp:include>
</body>
</html>
